import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { bindActionCreators } from 'redux';
import HeaderBar from '../../components/headerBar';
import BaseLayout from '../../layout/BaseLayout';
import * as homeActions from '../../redux/actions/homeAction'
class HomePage extends Component {
  componentDidMount() {
    const { setCity } = this.props;
    setCity.setCityName({
      cityName: '南京'
    });
  }
  render() {
    return (
      <BaseLayout>
        <HeaderBar cityName={this.props.info.cityName} />
        <p>
          <Link to='/counter'>redux-thunk 计数器</Link>
        </p>
        <p>
          <Link to='/saga'>saga 计数器</Link>
        </p>
        <p>
         <Link to='/cart'>redux-saga 购物车</Link>
        </p>
      </BaseLayout>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    info: state.cityName
  }
}

const mapActionToProps = (dispatch) => {
  return {
    setCity: bindActionCreators(homeActions, dispatch)
  }
}

export default connect(
  mapStateToProps,
  mapActionToProps
)(HomePage)
